import React, { useEffect, useState, useContext, Fragment } from 'react';
import { Tabs, Collapse, Icon, Skeleton } from 'antd';
import classNames from 'classnames';
import find from 'lodash/find';
import delay from 'lodash/delay';
import get from 'lodash/get';
import ScrollBar from '@/components/ScrollBar';
import IconFont from '@/components/IconFont';
import request from '@/utils/request';
import DesignerContext from './DesignerContext';
import DragItem from './DragItem';
import { itemTypes, bowlTypes, foodTypes, blockTypes, staticBlockTypes } from './types';
import { dealId } from './utils';
import styles from '../styles.less';

const { Panel } = Collapse;
const { TabPane } = Tabs;

// 每个节点追加__id属性
const bowlArr = dealId(bowlTypes);

const foodArr = dealId(foodTypes);

const blockArr = dealId(blockTypes);

const staticBlockArr = dealId(staticBlockTypes);

const all = [...bowlArr, ...foodArr, ...blockArr];

function getIcon(all, item) {
  const target = find(all, { componentType: item.componentType });

  if (get(target, 'icon')) {
    return get(target, 'icon');
  }

  return 'icon-input';
}

function Left() {
  const [busiCompList, setbusiCompList] = useState([]);
  const [customCompList, setCustomCompList] = useState([]);
  const [loading, setLoading] = useState(true);
  const DC = useContext(DesignerContext);

  useEffect(() => {
    if (DC.formId && DC.formId !== -1) {
      request('pmc/pcms/formDesigner/queryFormBusiCompList', {
        data: { formId: DC.formId },
      })
        .then(result => {
          const { success, data } = result;
          if (success === true && Array.isArray(data.busiCompList)) {
            setbusiCompList(dealId(data.busiCompList));
          }
          if (success === true && Array.isArray(data.customCompList)) {
            setCustomCompList(dealId(data.customCompList));
          }
        })
        .always(() => delay(() => setLoading(false), 300));
    }
  }, [DC.formId]);

  return (
    <Tabs
      className={styles.tabs}
      renderTabBar={(props, DefaultTabBar) => {
        return <DefaultTabBar {...props} />;
      }}
    >
      <TabPane
        tab="业务维度"
        key="1"
        className={classNames(styles.list, 'padding-top', 'padding-bottom')}
      >
        <ScrollBar
          renderView={({ style, ...props }) => {
            const viewStyle = {
              padding: '0 10px 0 4px',
            };
            return <div style={{ ...style, ...viewStyle }} {...props} />;
          }}
        >
          <Skeleton active paragraph={{ rows: 18 }} loading={loading} className={styles.marginLeft}>
            {busiCompList.map(itemA => {
              return (
                <Fragment key={itemA.__id}>
                  <DragItem key={itemA.elementName} type={itemTypes.bowl} {...itemA}>
                    <div className={classNames('text-ellipsis', styles.title)}>
                      {itemA.elementName}
                    </div>
                  </DragItem>
                  {Array.isArray(itemA.properties) && itemA.properties.length > 0
                    ? itemA.properties.map(itemB => (
                        <div
                          className={classNames(styles.iconCard, 'text-center')}
                          key={itemB.__id}
                          title={itemB.elementName}
                        >
                          <DragItem type={itemTypes.food} {...itemB}>
                            <div>
                              <IconFont type={getIcon(all, itemB)} className={styles.icon} />
                            </div>
                            <div className={classNames(styles.label, 'text-ellipsis')}>
                              {itemB.elementName}
                            </div>
                          </DragItem>
                        </div>
                      ))
                    : null}
                </Fragment>
              );
            })}
          </Skeleton>
        </ScrollBar>
      </TabPane>
      <TabPane tab="组件维度" key="2" className="padding-z">
        <ScrollBar>
          <Collapse
            defaultActiveKey={['bowl', 'block', 'food']}
            className={styles.list}
            bordered={false}
            expandIconPosition="right"
          >
            {/* <Panel header="容器类型" key="bowl">
              {bowlArr.map(item => (
                <div className={classNames(styles.iconCard)} key={item.__id}>
                  <DragItem {...item}>
                    <IconFont type={item.icon} className={styles.icon} />
                    <div className={classNames(styles.label, 'text-ellipsis')}>{item.label}</div>
                  </DragItem>
                </div>
              ))}
            </Panel> */}
            <Panel header="自定义类型" key="block">
              {customCompList.map(item => (
                <div className={classNames(styles.iconCard)} key={item.__id}>
                  <DragItem type={itemTypes.block} {...item}>
                    <IconFont type="icon-component" className={styles.icon} />
                    <div className={classNames(styles.label, 'text-ellipsis')}>{item.label}</div>
                  </DragItem>
                </div>
              ))}
            </Panel>
            <Panel header="基础类型" key="food">
              {/* <div className={classNames(styles.iconCard)}>
                <DragItem
                  {...{
                    type: itemTypes.staticBlock,
                    icon: 'icon-text',
                    label: '静态文本',
                    componentType: 'StaticText',
                  }}
                >
                  <IconFont type="icon-text" className={styles.icon} />
                  <div className={classNames(styles.label, 'text-ellipsis')}>静态文本</div>
                </DragItem>
              </div> */}
              {staticBlockArr.map(item => (
                <div className={classNames(styles.iconCard)} key={item.__id}>
                  <DragItem {...item}>
                    <IconFont type={item.icon} className={styles.icon} />
                    <div className={classNames(styles.label, 'text-ellipsis')}>{item.label}</div>
                  </DragItem>
                </div>
              ))}
              {/* {foodArr.map(item => (
                <div className={classNames(styles.iconCard)} key={item.__id}>
                  <DragItem {...item}>
                    <IconFont type={item.icon} className={styles.icon} />
                    <div className={classNames(styles.label, 'text-ellipsis')}>{item.label}</div>
                  </DragItem>
                </div>
              ))} */}
            </Panel>
          </Collapse>
        </ScrollBar>
      </TabPane>
    </Tabs>
  );
}

export default Left;
